<!-- 
 * 字典项页面
 * @author: 
 * @since: 2022-05-12
 * index.vue
-->
<template>
    <div class="dictItem-container detailsPageBox">
        <div class="detailsMain">
            <div class="top">
                <div class="search">
                    <div class="title">字典名称:</div>
                    <div class="search-input"><el-input v-model="state.dictData.keyName" disabled /></div>
                    
                </div>
            </div>
            <div class="table">
                <TableCom :tableHeader="state.tableHeader" :tableData="state.tableData" :btnData="state.btnData" @getCurrentChange="getCurrentChange" @comEvent="tableEventCom" @colSelect="colSelect" @refresh="getDictItemList()" :pagination="state.pagination" :loading="loading" @getSelectChange="getSelectChange" @getSizeChange="getSizeChange" handleWidth="170">
                    <functionBtn :btnList="btnList" @clickHandle="clickHandle"></functionBtn>
                </TableCom>
            </div>
        </div>
        <dictItemDrawer :isShowDrawer="isShowDictItemDrawer" type="dictItem" :dictData="state.dictData" @close="closeDictItemDrawer" :dictItemData="state.dictItemData" @refresh="getDictItemList()"></dictItemDrawer>
    </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, reactive } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';

import { sessionstorage } from "@/utils/storage";
import { colFilters, successHandle, tableIsEnable, batchHandle } from '@/utils/common.js'
import { getDictItemListApi, batchHandleDictItemApi } from '@/api/interface/dict.js'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter();
const store = useStore();

const state = reactive({
    dictData: {},//字典数据
    tableHeader: [
        {
            label: '字典项名称',
            prop: "keyName",
        },
        {
            label: '编码',
            prop: "keyId",
        },
        {
            label: '字典项说明',
            prop: "keyExplain",
        },
        {
            label: '字典项状态',
            prop: "valid",
            status: true
        },
    ],
    tableData: [],//表格数据
    pagination: {//分页信息
        currentPage: 1,
        size: 10,
        total: 0,
    },
    btnData: [
        {
            name: '编辑',
            icon: 'bianji',
            color: '#25D390',
            change: 'edit'
        },
        {
            name: '删除',
            color: '#F74B33',
            change: 'del',
        },
        {
            name: '是否启用',
            isStart: true,
            prop: 'valid',
            change: 'enable'
        },
    ],
    selectTableId: [],//表格选中的数据
    dictItemData: {},//字典项数据
})
//区域加载
const loading = ref(true)
//字典项管理模块功能按钮
const btnList = reactive([
    {
        name: '新增字典项',
        icon: '',
        bgColor: '#25D390'
    },
    {
        name: '批量启用',
        icon: 'qiyong',
        bgColor: '#00A2FF'
    },
    {
        name: '批量禁用',
        icon: 'forbid',
        bgColor: '#FFB018'
    },
    {
        name: '批量删除',
        icon: 'shanchu',
        bgColor: '#F74B33'
    },
])
//是否展示字典项右侧抽屉
const isShowDictItemDrawer = ref(false)

onMounted(() => {
    const level = router.currentRoute.value.meta.level
    store.dispatch('setting/setRouterCut', level);
    const params = router.currentRoute.value.params;
    if (!params.id) {//不是点击table详情进来，点击tabs切换进来
        const data = sessionstorage.get('dictData')
        state.dictData = data
    } else {//点击tabe详情进来
        state.dictData = params
        sessionstorage.set('dictData', params)
    }
    getDictItemList()

})
onUnmounted(() => {
    store.dispatch('setting/setRouterCut', 2);
})

//获取字典项列表
const getDictItemList = () => {
    const params = {
        dictType: state.dictData.keyId,
        ipi: state.pagination.currentPage,
        ips: state.pagination.size
    }
    loading.value = true
    getDictItemListApi(params).then(res => {
        const { data, status } = res
        if (status === 200) {
            loading.value = false
            state.tableData = data.result
            state.pagination.total = data.total
            state.pagination.currentPage = data.pageNum
            state.pagination.size = data.pageSize
        }
    })
}

//点击字典项操作按钮
const clickHandle = (index) => {
    switch (index) {
        case 0://新增字典项
            isShowDictItemDrawer.value = true
            break;
        case 1://批量启用
            batchHandle(state.selectTableId, 'START', () => {
                dictItemBatchHandle('START')
            })

            break;
        case 2://批量禁用
            batchHandle(state.selectTableId, 'STOP', () => {
                dictItemBatchHandle('STOP')
            })
            break;
        case 3://批量删除
            batchHandle(state.selectTableId, 'DEL', () => {
                dictItemBatchHandle('DEL')
            })
            break;
    }
}

//字典项批量操作
const dictItemBatchHandle = (type) => {
    const params = {
        dictType: state.dictData.keyId,
        batchModel: {
            ids: state.selectTableId,
            batchType: type
        }
    }
    batchHandleDictItemApi(params).then(res => {
        successHandle(res)
        getDictItemList()
    })
}
//关闭字典项抽屉
const closeDictItemDrawer = () => {
    isShowDictItemDrawer.value = false
    state.dictItemData = {}
}

//表格中的操作
const tableEventCom = (type, data) => {
    switch (type) {
        case 'edit':
            state.dictItemData = data;
            isShowDictItemDrawer.value = true
            break;
        case 'del':
            tableIsEnable(state.tableData, 'del', data, (newArr) => {
                state.selectTableId = newArr
                dictItemBatchHandle('DEL')
            })
            break;
        case 'enable':
            tableIsEnable(state.tableData, 'valid', data, (newArr) => {
                state.selectTableId = newArr
                !(data.valid) ? dictItemBatchHandle('START') : dictItemBatchHandle('STOP')
            })
            break;
    }

}

//表格筛选列---取消全选
const colSelect = (data, type, e, currentItem) => {
    if (type === 'filter') {
        const currentData = colFilters(data, e, currentItem, state.tableHeader)
        state.tableHeader = currentData;
    } else {//全选/全取消
        state.tableHeader = data;
    }
}

//点击条数
const getSizeChange = (val) => {
    state.pagination.size = val;
    getDictItemList()
}

//点击当前页
const getCurrentChange = (val) => {
    state.pagination.currentPage = val;
    getDictItemList()
}

//选择表格数据
const getSelectChange = (row) => {
    state.selectTableId = row.map(item => item.id)
}
</script>

<style lang="scss" scoped>
.dictItem-container {
    .top {
        padding: 20px 20px 0 20px;

        .search {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #e3e3e3;
            padding-bottom: 20px;

            .title {
                margin-right: 5px;
                font-size: 12px;
                color: var(--el-text-color-regular);
            }

            .search-input {
                width: 160px;
            }
        }
    }
}
</style>
